<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8"/>
<title>WordCloud demo</title>

<!-- 必要文件：jquery -->
<script src="/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- 必要文件：echarts -->
<script src="/echarts/echarts.min.js"></script>
<!-- ECharts主题(可选，默认为macarons) -->
<script src="/echarts/theme/dark.js"></script>
<script src="/echarts/theme/infographic.js"></script>
<script src="/echarts/theme/macarons.js"></script>
<script src="/echarts/theme/roma.js"></script>
<script src="/echarts/theme/shine.js"></script>
<script src="/echarts/theme/vintage.js"></script>
<!-- 必要文件：echarts.ajax自定义封装 -->
<script src="/echarts/echarts.ajax.js"></script>
<!-- ECharts字符云 -->
<script src="/echarts/echarts-wordcloud.js"></script>
<!-- 必要文件：ECharts css样式封装 -->
<style type="text/css">
.echarts {
    height: 460px;
    width: 99%;
    overflow: hidden;
    padding : 10px;
    margin: 10px auto;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>

</head>
<body>
<div id="demo-wordcloud" class="echarts">
</div>
<script type="text/javascript">
    var chart = echarts.init(document.getElementById('demo-wordcloud'));

    var option = {
        tooltip: {},
        series: [ {
            type: 'wordCloud',
            gridSize: 2,
            sizeRange: [12, 50],
            rotationRange: [-90, 90],
            // The shape of the "cloud" to draw. Can be any polar equation represented as a
            // callback function, or a keyword present. Available presents are circle (default),
            // cardioid (apple or heart shape curve, the most known polar equation), diamond (
            // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
            shape: 'pentagon',
            width: 600,
            height: 400,
            drawOutOfBound: true,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: [
                {
                    name: 'Sam S Club',
                    value: 10000,
                    textStyle: {
                        normal: {
                            color: 'black'
                        },
                        emphasis: {
                            color: 'red'
                        }
                    }
                },
                {
                    name: 'Macys',
                    value: 6181
                },
                {
                    name: 'Amy Schumer',
                    value: 4386
                },
                {
                    name: 'Jurassic World',
                    value: 4055
                },
                {
                    name: 'Charter Communications',
                    value: 2467
                },
                {
                    name: 'Chick Fil A',
                    value: 2244
                },
                {
                    name: 'Planet Fitness',
                    value: 1898
                },
                {
                    name: 'Pitch Perfect',
                    value: 1484
                },
                {
                    name: 'Express',
                    value: 1112
                },
                {
                    name: 'Home',
                    value: 965
                },
                {
                    name: 'Johnny Depp',
                    value: 847
                },
                {
                    name: 'Lena Dunham',
                    value: 582
                },
                {
                    name: 'Lewis Hamilton',
                    value: 555
                },
                {
                    name: 'KXAN',
                    value: 550
                },
                {
                    name: 'Mary Ellen Mark',
                    value: 462
                },
                {
                    name: 'Farrah Abraham',
                    value: 366
                },
                {
                    name: 'Rita Ora',
                    value: 360
                },
                {
                    name: 'Serena Williams',
                    value: 282
                },
                {
                    name: 'NCAA baseball tournament',
                    value: 273
                },
                {
                    name: 'Point Break',
                    value: 265
                }
            ]
        } ]
    };

    chart.setOption(option);

    window.onresize = chart.resize;
</script>
</body>
</html>